<script setup>
import EditContainer from "@/components/AdminConponents/EditContainer.vue";
import Game from './components/Game.vue'
import GamePrice from './components/GamePrice.vue'
import GameCategory from './components/GameCategory.vue'
import GameView from './components/GameView.vue'
import GameDetail from './components/GameDetail.vue'
import GameRequire from './components/GameRequire.vue'
import { ref } from 'vue'
import {useRouter} from "vue-router";
import 'element-plus/theme-chalk/el-message.css'
import {ElMessage} from "element-plus";

// 取消按钮
const router = useRouter()
const cancel = () => {
  router.go(-1)
}

// 步骤索引
const step = ref(0)

// 表单引用
const gameRef = ref()
const gamePriceRef = ref()
const gameCategoryRef = ref()
const gameViewRef = ref()
const gameDetailRef = ref()
const gameRequireRef = ref()
// 上一步按钮
const pre = () => {
  if (step.value-- < 0) step.value = 5
}

// 下一步按钮
const next = () => {
  if (step.value++ > 5) step.value = 0
}

const submit = async () => {
  if (await gameRef.value.validate() === false) {
    ElMessage.error("游戏基本信息待完善！")
    return
  }
  if (await gamePriceRef.value.validate() === false) {
    ElMessage.error("游戏价格信息待完善！")
    return
  }
  if (await gameCategoryRef.value.validate() === false) {
    ElMessage.error("游戏分类信息待完善！")
    return
  }
  if (await gameViewRef.value.validate() === false) {
    ElMessage.error("游戏预览信息待完善！")
    return
  }
  if (await gameDetailRef.value.validate() === false) {
    ElMessage.error("游戏详细信息待完善！")
    return
  }
  if (await gameRequireRef.value.validate() === false) {
    ElMessage.error("游戏需求信息待完善！")
    return
  }
  const res = await gameRef.value.submit()
  if (res.code !== 1) {
    return
  }
  const code1 = await gamePriceRef.value.submit(res.data)
  if (code1 !== 1) {
    return
  }
  const code2 = await gameCategoryRef.value.submit(res.data)
  if (code2 !== 1) {
    return
  }
  const code3 = await gameViewRef.value.submit(res.data)
  if (code3 !== 1) {
    return
  }
  const code4 = await gameDetailRef.value.submit(res.data)
  if (code4 !== 1) {
    return
  }
  const code5 = await gameRequireRef.value.submit(res.data)
  if (code5 !== 1) {
    return
  }
  ElMessage.success("添加成功")
}

</script>

<template>
  <EditContainer title="添加游戏">
    <template #body>
      <el-steps align-center :active="step" finish-status="success">
        <el-step title="游戏基本信息" />
        <el-step title="游戏价格信息" />
        <el-step title="游戏分类信息" />
        <el-step title="游戏预览信息" />
        <el-step title="游戏详细信息" />
        <el-step title="游戏需求信息" />
      </el-steps>
      <Game v-show="step === 0" ref="gameRef" ></Game>
      <GamePrice v-show="step === 1" ref="gamePriceRef"></GamePrice>
      <GameCategory v-show="step === 2" ref="gameCategoryRef"></GameCategory>
      <GameView v-show="step === 3" ref="gameViewRef"></GameView>
      <GameDetail v-show="step === 4" ref="gameDetailRef"></GameDetail>
      <GameRequire v-show="step === 5" ref="gameRequireRef"></GameRequire>
    </template>
    <template #footerLeft>
      <el-button class="button" @click="cancel" type="info">取消</el-button>
    </template>
    <template #footerRight>
      <el-button v-if="step !== 0" class="button" @click="pre" type="primary">上一步</el-button>
      <el-button v-if="step === 5" @click="submit" type="success">提交</el-button>
      <el-button v-else class="button" @click="next" type="primary">下一步</el-button>
    </template>
  </EditContainer>
</template>

<style scoped>

</style>
